<template>
  <div style="padding-top:60px;">
    <section class="s-top" :style="insq?'top:0;':''" >
      <swiper :options="swiperOption">
        <swiper-slide class="s-year" data-toggleyear='-1'>
          <span>{{date.year}}</span>
          <div class="ico-arrow-l"></div>
        </swiper-slide>
        <swiper-slide v-for="item in 12" :key="item">
          <span :style="calcOpacity(item)">{{item}}月</span>
        </swiper-slide>
        <swiper-slide class="s-year" data-toggleyear='1'>
          <div class="ico-arrow-r"></div>
          <span>{{date.year+1}}</span>
        </swiper-slide>
      </swiper>
      <div class="ico-arrow-t"></div>
    </section>
    <template v-if="hasdata==0"></template>
    <v-delay v-else-if="hasdata==1">
      <div v-for="(item,idx) in currList" :key="idx">
        <div class='s-date flex-center'>
          <img :src="cImg" alt="">
          <span>{{getCanlendar(item.date)}}</span>
        </div>
        <shoe-unit v-for="unit in item.list" :key="unit.id" :unit="unit" :type="1"></shoe-unit>
      </div>
    </v-delay>
    <no-shoe v-else>本月暂无发售信息</no-shoe>
  </div>
</template>
<script>
import ShoeUnit from '../../templates/ShoeListUnit'
import NoShoe from '../../templates/ShoeNodata'
import { StockXByDate } from '../../../common/api/stock'
import { mapGetters } from 'vuex'
import { APP } from '../../../common/util'
export default {
  components: { ShoeUnit, NoShoe },
  data() {
    return {
      hasdata: 0,
      cImg: '//files.eyee.com/mcdn/static/img/calendar.png', // require('../../../assets/img/calendar.png'),
      list: {},
      currList: [],
      date: { year: 1990, month: 1 },
      currM: 1,
      tPos: { pre: 99, next: 99 },
      swiperOption: {
        // initialSlide: new Date().getMonth() + 1,
        slidesPerView: 'auto',
        // freeMode: true,
        freeModeMomentumBounce: false, // 禁用反弹
        resistanceRatio: 0, // 无法拖离边界
        centeredSlides: true, // 居中
        // slideToClickedSlide: true, // 点击选中
        onInit: (swiper) => { this.swInit(swiper) },
        onSetTranslate: (swiper, translate) => { this.translate(swiper, translate) },
        onSlideChangeStart: (swiper) => { this.toggleSlideStart(swiper) },
        onSlideChangeEnd: (swiper) => { this.toggleSlideEnd(swiper) },
        onTap: (swiper, event) => { this.tapYear(swiper, event) }
      }
    }
  },
  mounted() {
    let data = APP.shareData.shoeSales
    this.initShare({ type: 0, info: { ...data }})
    let now = new Date()
    this.date.year = now.getFullYear()
    if (this.shoes && this.shoes.list && this.shoes.list.length > 0) {
      this.date.month = this.shoes.month
      this.list[this.shoes.key] = this.shoes.list
    } else this.date.month = now.getMonth() + 1
    this.swiperOption.initialSlide = this.date.month
    // console.log('this.date', this.date);
    // this.req();
  },
  beforeDestroy() {
    let currlist = this.list[this.currKey], data = { key: '', month: '', list: [] }
    data.key = this.currKey
    data.month = this.date.month
    data.list = currlist
    this.$store.dispatch('setSalesShoe', data)
  },
  computed: {
    ...mapGetters({ insq: 'insq', shoes: 'salesShoe' }),
    currKey() { return this.currDate.year + '' + this.currDate.month },
    currDate() {
      let date = this.date
      date.month = this.currM
      return date
    }
  },
  methods: {
    getCanlendar(date) {
      date = date && date.toString()
      // console.log('date', date);
      let unit = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九'],
        decade = ['', '十', '二十', '三十'],
        m = unit[this.date.month], d = ''
      if (date && date.length > 1) {
        d = decade[date[0]] + unit[date[1]]
      } else d = unit[date]
      // console.log('m%s,d%s', m, d);
      return m + '月' + d + '日'
    },
    calcOpacity(idx) {
      let temp = Math.abs(this.currM - idx)
      return (temp > 0 && temp < 13) ? ('opacity:' + (temp == 1 ? '.7' : (temp == 2 ? '.4' : '.1')) + ';') : ''
    },
    req() {
      window.scrollTo(0, 0)
      let currlist = this.list[this.currKey]
      this.currList = currlist
      if (currlist && currlist.length > 0) { this.hasdata = 1; return }
      let param = { startTime: this.currDate.year + '-' + this.currDate.month + '-1', endTime: '' },
        nextM = this.currDate.month + 1, nextY = this.currDate.year
      if (nextM > 12) { nextY += 1; nextM = 1 }
      // param.endTime = (nextY + '-' + nextM + '-1');
      let tempEndTime = new Date(nextY, nextM - 1, 0)
      param.endTime = (tempEndTime.getFullYear() + '-' + (tempEndTime.getMonth() + 1) + '-' + tempEndTime.getDate())
      // console.log('req param', param);
      StockXByDate(param).then(res => {
        console.log('StockXByDate result', res)
        if (res && res.list.length > 0) {
          this.currList = res.list.sort((a, b) => { return a.date - b.date })
          this.list[this.currKey] = res.list
          this.hasdata = 1
        } else this.hasdata = 2
      }).catch(e => { this.hasdata = 2; this.toast(e && e.msg ? e.msg : ('error:' + e)) })
    },
    swInit(swiper) {
      let winhalfW = window.innerWidth / 2
      this.tPos.pre = winhalfW - this.getTranslate(swiper, 1)
      this.tPos.next = winhalfW - this.getTranslate(swiper, swiper.slides.length - 2)
    },
    getTranslate(swiper, idx) {
      let trans = 0
      for (var i = 0; i < swiper.slides.length; i++) {
        if (swiper.slides[i]) {
          if (i < idx) trans += swiper.slides[i].offsetWidth
          if (i == idx) trans += (swiper.slides[i].offsetWidth / 2)
        }
      }
      return trans
    },
    translate(swiper, translate) {
      let b = false, toidx = 1
      if (this.tPos.pre != 99 && translate > this.tPos.pre) {
        b = true
        toidx = 1
        swiper.setWrapperTranslate(this.tPos.pre)
      }
      if (this.tPos.next != 99 && translate < this.tPos.next) {
        b = true
        toidx = swiper.slides.length - 2
        swiper.setWrapperTranslate(this.tPos.next)
      }
      if (b == true && this.currM != swiper.realIndex) {
        this.currM = toidx
        swiper.slideTo(toidx)
        this.req()
      }
    },
    toggleSlideStart(swiper) {
      let toIdx = swiper.realIndex, len = swiper.slides.length
      // console.log('toIdx', toIdx);
      if (toIdx == 0) swiper.slideTo(1)
      if (toIdx == (len - 1)) swiper.slideTo(len - 2)
    },
    toggleSlideEnd(swiper) {
      let toIdx = swiper.realIndex
      this.currM = toIdx
      if (toIdx == 1) swiper.lockSwipeToPrev()
      else swiper.unlockSwipeToPrev()
      if (toIdx == (swiper.slides.length - 2)) swiper.lockSwipeToNext()
      else swiper.unlockSwipeToNext()
      this.req()
    },
    tapYear(swiper, event) {
      let tag = event.target, data = tag && tag.dataset && tag.dataset['toggleyear']
      if (data && (data == 1 || data == -1)) {
        this.date.year = this.date.year + parseInt(data)
        this.req()
      }
    }
  }
}
</script>
<style scoped>
.s-top {
  position: fixed;
  top: 48px;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-bottom: 2px solid #eeeeee;
  z-index: 99;
  overflow: hidden;
}

.ico-arrow-t {
  border-width: 4px;
  border-bottom-width: 10px;
  border-top: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.s-top-box {
  height: 60px;
}

.swiper-slide {
  width: 60px;
  height: 60px;
  line-height: 60px;
  color: #000;
  font-size: 20px;
  text-align: center;
}

.swiper-slide>* {
  pointer-events: none;
  transition: opacity .3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.s-year {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  width: 150px;
}

.s-year>span {
  width: 90px;
}

.ico-arrow-l,
.ico-arrow-r {
  border-width: 21px;
}

.ico-arrow-l {
  border-right-width: 24px;
  border-left: none;
}

.ico-arrow-r {
  border-left-width: 24px;
  border-right: none;
}

.s-date {
  justify-content: flex-start;
  height: 40px;
  border: 1px solid #eee;
  border-left: none;
  border-right: none;
  font-size: 15px;
  color: #666;
}

.s-date img {
  width: 16px;
  margin: 0 15px;
}
</style>
